<template>
	<view>
		<view>
			<image @click="showImage" class="adv" mode="widthFix" :src="item.image" v-for="(item,index) in bannerArr"></image>
		</view>
		<view class="tab">
			<block v-for="(item,index) in tabs">
				<view class="tab-item">
					<view @click="tabChange" :data-index="index" class="tab-name" :class="index == tabIndex ? 'item-active' : ''">{{item.name}}</view>
				</view>
			</block>
		</view>
		<view class="video-list">
			<block v-for="(item,index) in rooms">
				<view class="video-2">
					<view :data-roomid="item.roomid" :data-id="item.id" :data-type="item.type"  @click="toLive"> 
						<view class="cover">
							<image mode="widthFix" :src="item.share_img"></image>
						</view>
						<view class="video-name">{{item.name}} </view>
						<view class="video-description" v-if="item.type == 'live'">开播时间：{{item.start_time | time}}</view>
						<view class="video-description" v-else-if="item.type == 'url'">上传时间：{{item.created_at | time}}</view>
					</view>
				</view>
			</block>
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import {
		Video
	} from '@/model/video.js';
	var video = new Video();
	import { Adv } from '@/model/adv.js';
	var adv = new Adv();
	import moment from '@/utils/moment';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				tabs: [{
						name: '上课中',
						status: 101
					},
					{
						name: '待上课',
						status: 102
					},
					{
						name: '已结束',
						status: 103
					}
				],
				tabIndex: 0,
				page: 1,
				rooms: [],
				bannerArr:[],
				loadStatus: 'more',
				cate_id:''
			}
		},
		onLoad(options) {
			this.cate_id = options.cate_id ? options.cate_id : '';
			this.banner();
			this.videoList();
		},
		onPullDownRefresh() {

		},
		filters: {
			// 时间格式化
			time(val) {
				return moment(val * 1000).format('MM-DD HH:mm');
			},
		},
		methods: {
			banner:function(){
				var that = this;
				//获得bannar信息
				var params = {
					'num': 1,
					'key': 'zhibo_list'
				};
				adv.list(params, (data) => {
					that.$data.bannerArr = data.items;
				});
			},
			check:function(){
				var user = uni.getStorageSync('user');
				var that = this;
				if(!user.member){
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success(res) {
							if (res.confirm) {
								that.goto("/pages/public/logintype");
							} else if (res.cancel) {
								return false;
							}
						}
					})
					return false
				}
				if(!user.member.student){
					console.log("unbind");
					uni.showModal({
						title: '提示',
						content: '观看直播前必须完善学生个人信息',
						success(res) {
							if (res.confirm) {
								that.goto("/pages/user/info");
							} else if (res.cancel) {
								return false;
							}
						}
					})
					return false
				}
				return true;
			},
			videoList: function() {
				var that = this;
				var params = {
					page: this.$data.page,
					live_status:this.$data.tabs[this.$data.tabIndex].status,
					cate_id: this.cate_id
				}
				if (this.$data.onLoading) {
					return false;
				}
				that.$data.onLoading = true;
				that.$data.loadStatus = "loading";
				video.list(params, (data) => {
					that.$data.onLoading = false;
					var items = data.items;
					items = this.$data.rooms.concat(items);
					that.$data.rooms = items;
					if (that.$data.page >= data._meta.pageCount) {
						that.$data.loadStatus = "noMore";
					}else{
						that.$data.loadStatus = "more";
					}
				})
			},
			tabChange: function(e) {
				if (this.$data.onLoading) {
					return false;
				}
				var index = e.currentTarget.dataset.index;
				this.$data.tabIndex = index
				this.reset();
				this.videoList();
			},
			reset: function() {
				this.$data.page = 1;
				this.$data.rooms = [];
			},
			toLive:function(e){
				let roomId = this.getDataSet(e,'roomid');
				let type = this.getDataSet(e,'type'); 
				let id = this.getDataSet(e,'id');
				if(type == 'live'){
					if(!this.check()){
						return false;
					}
					let customParams = encodeURIComponent(JSON.stringify({}))
					var url = `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`;
					wx.navigateTo({
					    url: url
					})
				}else if(type == 'url'){
					var url = "/pages/video/detail?id="+id;
					this.goto(url);
				}
				
			},
			/**
			 * 页面上拉触底事件的处理函数
			 */
			onReachBottom: function() {
				if(this.$data.loadStatus == 'noMore'){
					return false;
				}
				this.$data.page ++ ;
				this.videoList();
			},
			showImage:function(){
				var that = this;
				var images = [];
				that.$data.bannerArr.forEach((item)=>{
					images.push(item.image);
				})
				// 预览图片
				uni.previewImage({
					urls: images,
					longPressActions: {
						itemList: [ '保存图片'],
						success: function(data) {
							
						},
						fail: function(err) {
							
						}
					}
				});
			}
		}

	}
</script>

<style lang="scss">
	.adv{width: 100%;}
	page {
		background-color: #fff;
	}

	.swiper {
		min-height: 360rpx;
	}

	.center {
		margin: 0 auto;
	}

	.slide-image {
		width: 100%;
	}

	.tab {
		display: flex;
		margin: 20rpx 0 20rpx 0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
	}

	.tab-name {
		width: 100rpx;
		margin: 0 auto;
		padding: 20rpx 0;
		color: #666;
	}

	.item-active {
		border-bottom: 4rpx solid #ff4400;
		color: #ff4400;
	}

	.video-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 3%;
		margin-top: 40rpx;
	}

	.video-2 {
		width: 49%;
		margin-bottom: 50rpx;
	}

	.video-2:nth-child(odd) {
		margin-right: 2%;
	}

	.video-2 .cover image {
		width: 100%;
		height: 250rpx !important;
	}

	.video-name {
		color: #111;
		padding-left: 20rpx;
		font-size: 32rpx;
		line-height: 38rpx;
		max-height: 76rpx;
		overflow: hidden;
		margin-top: 10rpx;
	}

	.video-description {
		color: #999;
		padding-left: 20rpx;
		font-size: 28rpx;
		margin-top: 10rpx;
		line-height: 36rpx;
		max-height: 72rpx;
		overflow: hidden;
	}

	.video {
		height: 100%;
	}

	/*分类*/
	.video-category {
		display: flex;
		justify-content: space-between;
		padding: 0 4%;
		width: 100;
		flex-wrap: wrap;
	}

	.video-category-item {
		background-color: #FF6600;
		color: #fff;
		width: 48%;
		text-align: center;
		padding: 50rpx 0;
		border-radius: 15rpx;
		margin-top: 20rpx;
	}
</style>
